<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
		.css .red{
			background: red;
		}
		.css ul li {
			transition: all .3;
		}
		.css .hover{
			opacity: 0.5;
        }
        

        .row{
			display: none;
		}
		.box .row{
			display: block;
		}
	</style>
</head>
<body>
    <p class="p1" id="p1">段落</p>  
	<a href="" id="js">js</a>
    <a href="" id="jq">jq</a>
    
    <div class="box">
		<ul>
			<li>item1</li>
			<li>item2</li>
			<li class="jony">item3 <a href="">child <span>蓝色的眼睛</span></a></li>
			<li>item4</li>
			<li>item5</li>
		</ul>
    </div>
    
    <div class="css">
        <ul>
            <li>item1</li>
            <li class="red">item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>

        <div class="ly">
            <p class="content">前面的留言...</p>
            <span>具体的留言....</span>
        </div>
    </div>

    <p class=".p" title="这不是一个链接" >百度</p>
	<form>
		唱：<input type="checkbox" name="love" value="sing">
		跳：<input type="checkbox" name="love" value="jump">
		rap：<input type="checkbox" name="love" value="rap">
		篮球：<input type="checkbox" name="love" value="basketball">
		<input type="button" value="全选" id="sltAll" >
		<input type="button" value="取消" id="cancel">
		<input type="button" value="反选" id="reverse">
    </form>
    

    <div class="box">
        <input type="" name="" class="clone">
        <button class="add">+</button>
    </div>
    
    <div class="row">
        <input type="" name="">
        <button class="remove">-</button>
    </div>


    <p id="p2">广州</p>

    <p class="p3">剧终</p>


</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    //jquery.html
    console.log($.fn.jquery)
    window.onload = function() {
        alert('获取图片对象1')
    }
    $(document).ready(function(){
        alert('获取图片对象2')
    })

    $(function(){
        alert('页面载入了...')
    })

    $(function(){
        //js&jq.html
        var p1Dom = document.getElementById('p1')
        console.log(p1Dom)
        console.log('jq', $(p1Dom))
        var p1Jq = $('p')
        console.log('dom:' , p1Jq[0])
        console.log(p1Dom === p1Jq[0])
        console.log(p1Dom.innerHTML)
        console.log(p1Jq.innerHTML) 
        var js = document.getElementById('js')
        js.onclick = function() {
            alert('this is js')
        }
        var jq = $('#jq')
        jq.click(function(){
            alert('this is jq')
        })
    })

    $(function(){
        //relationship.html
        var jony = $('.jony')
        console.log(jony.siblings())
        console.log(jony.next())
        console.log(jony.prev())
        console.log(jony.nextAll())
        console.log(jony.prevAll())
        console.log(jony.parent())
        console.log(jony.parents('.box'))
        console.log(jony.children())
        console.log(jony.find('span'))
    })

    $(function(){
        //class&css.html
        var lis = $('.css ul li')

        // lis.mouseover(function(){
        //  	$(this).css('backgroundColor', 'green')
        // })
        // lis.mouseout(function(){
        //  	$(this).css('backgroundColor', '')
        // })

        lis.hover(function(){
            // $(this).css('backgroundColor', 'green')
            $(this).css({'color':'white', 'backgroundColor':'green' })
            $(this).css('fontSize', function(index, value) {
                return parseInt(value) * 1.8
            })
            $(this).addClass('hover')

        },function(){
            $(this).css( {'backgroundColor': '', 'color':'black'} )
            $(this).css('fontSize', function(index, value) {
                return parseInt(value) / 1.8
            })
            $(this).removeClass('hover')
        })	
        console.log($('.red').css('width'))
        $('.content').next().hide()
        $('.content').click(function(){
            $(this).next().toggle()
        })
    })

    $(function(){
        //attr&prop.html
        var pAttr = $('.p').attr('title')
        console.log(pAttr)
        $('.p').attr('title', '这是p标签')
        var pAttr = $('.p').attr('title')
        console.log(pAttr)


        $('#sltAll').click(function(){
            var inputs= $('input[name=love]')
            for(var i = 0; i <inputs.length; i++) {
                inputs.eq(i).prop('checked', true)
            }
        })
        $('#cancel').click(function(){
            var inputs= $('input[name=love]')
            for(var i = 0; i <inputs.length; i++) {
                inputs.eq(i).prop('checked', false)
            }
        })
        $('#reverse').click(function(){
            var inputs= $('input[name=love]')
            for(var i = 0; i <inputs.length; i++) {
                inputs.eq(i).prop('checked', !inputs.eq(i).prop('checked'))
            }
        })

        $('.add').click(function(){
            var row = $('.row').first().clone() 
            $(this).before(row) 
        })
        $('.box').on( 'click', '.remove', function(){
            console.log($(this).index('.remove')) // 得到当前remove在remove数组元素里面的下标
            $(this).parent().remove()
        })
    })

    $(function(){
        //event.html
        var p2 = $('#p2')
        p2.bind('click', function(){
            alert('我只执行一次')
            p2.unbind('click')
        })
        function clickP(){
            p2.trigger('click')
        }
        setInterval(clickP, 3000)


        //animation.html
        $('.p3').slideUp(5000).slideDown('slow', function(){
            alert('再见、')
        })
    })

</script>